<template>
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item>
        <el-select v-model="searchUserSubjectFrom.subjectId"
                   clearable
                   filterable
                   style="width:240px;"
                   placeholder="请输入专题名称">
          <el-option
              v-for="item in subjectData"
              :label="item.subjectName"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="searchUserSubject">搜索</el-button>
      </el-form-item>
      <el-button type="primary"
                 @click="check"
                 style="margin-right: 20px;float: right">查看详情
      </el-button>
      <el-button type="success" @click="addUserSubject" v-if="userSubjectData.length < 5"
                 style="margin-right: 20px;float: right">新增
      </el-button>
    </el-form>
  </el-card>
  <el-card style="margin:20px;">
    <div style="margin:10px 0 40px 10px;">
      专题管理
    </div>
    <el-table :data="userSubjectData"
              style="height: 500px;">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="subjectName" label="专题名称" align="center"/>
      <el-table-column prop="description" label="专题描述" align="center"/>
      <el-table-column prop="sort" label="顺序" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary"
                     @click="updateUserSubject(scope.row.id)">修改
          </el-button>
          <el-button link type="danger"
                     @click="deleteUserSubject(scope.row.id)">删除
          </el-button>
          <el-button link type="primary"
                     @click="poster(scope.row.id)">
            海报
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog v-model="posterVisible"
             style="width:560px;height: 360px; padding:30px;">
    <el-image
        :src="BASE_URL + posterUrl"
        style="width: 100%;height: 290px;"
        alt="">
    </el-image>
  </el-dialog>

  <el-dialog v-model="checkVisible"
             style="width:1000px;height: 530px; padding:30px;">
    <el-card>
      <el-row :gutter="40">
        <el-col :span="16">
          <el-carousel height="400px" motion-blur>
            <el-carousel-item v-for="item in userSubjectData" :key="item">
              <img :src="BASE_URL + item.poster"
                   style="width: 100%;height: 400px;border-radius: 10px"
                   alt="item.subjectName">
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="8">
          <div v-for="(item,index) in userSubjectData">
            <div v-if="index === 0">
              <img :src="BASE_URL + item.poster"
                   style="width: 100%;height: 190px;border-radius: 10px"
                   alt="item.subjectName">
            </div>
            <div v-if="index === 1 " style="margin-top: 20px;">
              <img :src="BASE_URL + item.poster"
                   style="width: 100%;height: 190px;border-radius: 10px;"
                   alt="item.subjectName">
            </div>
          </div>

        </el-col>
      </el-row>
    </el-card>
  </el-dialog>

  <el-dialog v-model="addUserSubjectVisible"
             :title="userSubjectTitle"
             :before-close="cancel"
             style="width:560px;height: 260px; padding:30px;">
    <el-form label-width="100">
      <el-form-item label="专题名称">
        <el-select v-model="saveUserSubjectFrom.subjectId"
                   clearable
                   filterable
                   style="width:240px;"
                   placeholder="请输入专题名称">
          <el-option
              v-for="item in subjectData"
              :label="item.subjectName"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="顺序">
        <el-input v-model="saveUserSubjectFrom.sort"
                  style="width:240px;"
                  placeholder="请输入顺序"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="saveUserSubject">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";

const subjectData = ref([])
const searchSubject = () => {
  axios.get(BASE_URL + '/v1/subject/select?')
      .then((response) => {
        if (response.data.code === 2000) {
          subjectData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchSubject();
})

const searchUserSubjectFrom = ref({
  subjectId: ''
})
const userSubjectData = ref([]);
const searchUserSubject = () => {
  let data = qs.stringify(searchUserSubjectFrom.value);
  axios.get(BASE_URL + '/v1/subjectSort/select?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          userSubjectData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchUserSubject()
})
const resetSearch = () => {
  searchUserSubjectFrom.value = {
    subjectId: ''
  }
  searchUserSubject()
}
const deleteUserSubject = (id) => {
  ElMessageBox.confirm('确定删除吗？', '提示', {
    customClass: 'custom-message-box',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    axios.delete(BASE_URL + '/v1/subjectSort/delete/' + id)
        .then((response) => {
          if (response.data.code === 2000) {
            OKInfo('删除成功!')
            searchUserSubject()
          } else {
            ElMessage({
              message: response.data.msg,
              type: 'error',
              showClose: true,
              center: true,
            });
          }
        });
  }).catch(() => {
    Info('已取消删除')
  })
}
const posterVisible = ref(false)
const posterUrl = ref('')
const poster = (id) => {
  posterVisible.value = true
  axios.get(BASE_URL + '/v1/subjectSort/select?id=' + id)
      .then((response) => {
        if (response.data.code === 2000) {
          posterUrl.value = response.data.data[0].poster;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      })
}
const checkVisible = ref(false);
const check = () => {
  checkVisible.value = true;
}

const addUserSubjectVisible = ref(false);
const userSubjectTitle = ref("新增专题")
const addUserSubject = () => {
  addUserSubjectVisible.value = true;
}
const saveUserSubjectFrom = ref({
  subjectId: '',
  sort: ''
})

const saveUserSubject = () => {
  if (saveUserSubjectFrom.value.subjectId === ''){
   errorInfo('请选择专题')
    return;
  }
  if (saveUserSubjectFrom.value.sort === ''){
   errorInfo('请输入顺序')
    return;
  }
  let data = qs.stringify(saveUserSubjectFrom.value);
  axios.post(BASE_URL + '/v1/subjectSort/save', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('保存成功!')
          addUserSubjectVisible.value = false;
          saveUserSubjectFrom.value = {
            subjectId: '',
            sort: ''
          }
          searchUserSubject()
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
const cancel = () => {
  ElMessageBox.confirm('确定取消吗？', '提示', {
    customClass: 'custom-message-box',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    Info('已取消')
    addUserSubjectVisible.value = false;
    saveUserSubjectFrom.value = {
      subjectId: '',
      sort: ''
    }
  }).catch(() => {

  })
}
const updateUserSubject = (id) => {
  addUserSubjectVisible.value = true;
  userSubjectTitle.value = '修改信息';
  axios.get(BASE_URL + '/v1/subjectSort/select?id=' + id)
      .then((response) => {
        if (response.data.code === 2000) {
          saveUserSubjectFrom.value = response.data.data[0];
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
</script>

<style scoped>

</style>